<template>
	<view>
		<view style="padding: 20rpx;margin: 0 15px; background-color: #fff;border-radius: 10rpx;">
			<view style="margin-top: 7px;" v-if="notice1.title">
				<el-link :underline="false" icon="el-icon-bell" @click="todetail(notice1)">{{notice1.title}}</el-link>
			</view>
			<view style="margin-top: 7px;" v-if="notice2.title">
				<el-link :underline="false" icon="el-icon-bell" @click="todetail(notice2)">{{notice2.title}}</el-link>
			</view>
			<view style="margin-top: 7px;" v-if="notice3.title">
				<el-link :underline="false" icon="el-icon-bell" @click="todetail(notice3)">{{notice3.title}}</el-link>
			</view>
			<navigator url="/pages/index/notice" style="color: #688fff;margin:15px 10px;">更多公告>></navigator>
		</view>
		<view>
			<view style="margin: 20px 0 0 20px;font-size: 40rpx;font-weight: bold;">今日数据</view>
			<view style="margin: 0 15px;">
				<view style="display: flex;flex-wrap: wrap;">
					<!-- <view class="topbox">
						<text style="color: gray;color: red;">定时刷新
							<el-tooltip class="item" effect="dark" content="定时刷新获取实时数据" placement="top-end">
								<i style="margin-left: 30rpx;" class="vk-icon-question"></i>
							</el-tooltip>
						</text>
						<view class="numstyle" style="color: red;">
							{{time_refresh}}
						</view>
					</view> -->

					<view class="topbox">
						<text style="color: gray;">新增用户数
							<el-tooltip class="item" effect="dark" content="今日新增的人数" placement="top-end">
								<i style="margin-left: 30rpx;" class="vk-icon-question"></i>
							</el-tooltip>
						</text>
						<view class="numstyle">{{new_add_user||0}}</view>
					</view>


					<view class="topbox">
						<text style="color: gray;">今日充值人数
							<el-tooltip class="item" effect="dark" content="今日付费的人数" placement="top-end">
								<i style="margin-left: 30rpx;" class="vk-icon-question"></i>
							</el-tooltip>
						</text>
						<view class="numstyle">{{Users_payNumber||0}}</view>
					</view>

					<view class="topbox">
						<view style="color: gray;">充值金额</view>
						<view class="numstyle">¥{{today_Recharge_amount||0}}</view>
					</view>

					<view class="topbox">
						<text style="color: gray;">充值笔数</text>
						<view class="numstyle">
							{{today_recharges_Number||0}}
						</view>
					</view>

					<view class="topbox">
						<text style="color: gray;">笔单价
							<el-tooltip class="item" effect="dark" content="充值金额/充值笔数" placement="top-end">
								<i style="margin-left: 30rpx;" class="vk-icon-question"></i>
							</el-tooltip>
						</text>
						<view class="numstyle">
							{{today_unit_price||0}}
						</view>
					</view>

					<view class="topbox">
						<text style="color: gray;">新用户充值人数
							<el-tooltip class="item" effect="dark" content="今日新增用户中付费的人数" placement="top-end">
								<i style="margin-left: 30rpx;" class="vk-icon-question"></i>
							</el-tooltip>
						</text>
						<view class="numstyle">{{newUsers_payNumber||0}}</view>

					</view>


					<view class="topbox">
						<text style="color: gray;">新用户付费率
							<el-tooltip class="item" effect="dark" content="新用户充值人数/新增用户" placement="top-end">
								<i style="margin-left: 30rpx;" class="vk-icon-question"></i>
							</el-tooltip>
						</text>
						<view class="numstyle">{{newUsers_rate||0}}%</view>

					</view>

					<view class="topbox">
						<text style="color: gray;">新用户人均充值
							<el-tooltip class="item" effect="dark" content="新用户充值金额/新增用户数" placement="top-end">
								<i style="margin-left: 30rpx;" class="vk-icon-question"></i>
							</el-tooltip>
						</text>
						<view class="numstyle">￥{{newUsers_pcr||0}}</view>
					</view>

					<view class="topbox">
						<text style="color: gray;">新用户付费平均值
							<el-tooltip class="item" effect="dark" content="新用户充值金额/新用户充值人数" placement="top-end">
								<i style="margin-left: 30rpx;" class="vk-icon-question"></i>
							</el-tooltip>
						</text>
						<view class="numstyle">
							{{today_xyhffupz||0}}
						</view>
					</view>



					<view class="topbox">
						<text style="color: gray;">新用户充值金额
							<el-tooltip class="item" effect="dark" content="今日新增用户付费的金额" placement="top-end">
								<i style="margin-left: 30rpx;" class="vk-icon-question"></i>
							</el-tooltip>
						</text>
						<view class="numstyle">¥{{new_users_moneysum||0}}</view>
					</view>

					<!-- 					<view class="topbox">
						<text style="color: gray;">复充人数
							<el-tooltip class="item" effect="dark" content="当天充值笔数>=2的人数" placement="top-end">
								<i style="margin-left: 30rpx;" class="vk-icon-question"></i>
							</el-tooltip>
						</text>
						<view class="numstyle">
							{{today_repeat_user||0}}
						</view>
					</view>
					<view class="topbox">
						<text style="color: gray;">复充金额
							<el-tooltip class="item" effect="dark" content="当天充值笔数>=2的充值总金额" placement="top-end">
								<i style="margin-left: 30rpx;" class="vk-icon-question"></i>
							</el-tooltip>
						</text>
						<view class="numstyle">
							{{today_repeat_amount||0}}
						</view>
					</view>
					<view class="topbox">
						<text style="color: gray;">复充率
							<el-tooltip class="item" effect="dark" content="复充人数/今日充值人数" placement="top-end">
								<i style="margin-left: 30rpx;" class="vk-icon-question"></i>
							</el-tooltip>
						</text>
						<view class="numstyle">
							{{today_repeat_rate||0}}%
						</view>
					</view> -->

				</view>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	const db = uniCloud.database();

	export default {
		data() {
			return {
				timer: 0, //定时器
				time_refresh: 60, //60秒自动刷新
				today_repeat_rate: 0, //复充率
				today_repeat_amount: 0, //复充金额
				todayStart: 0,
				notice1: '',
				notice2: '',
				notice3: '',
				new_add_user: 0, //新增用户
				new_users_moneysum: 0, //新用户充值金额
				Users_payNumber: 0, //今日付费人数
				newUsers_payNumber: 0, //新用户充值人数
				newUsers_rate: 0, //新用户付费率
				newUsers_pcr: 0, //新用户人均充值金额
				today_Recharge_amount: 0, //今日充值金额
				today_recharges_Number: 0, //今日充值笔数
				today_unit_price: 0, //笔单价
				today_xyhffupz: 0, //新用户付费up值
				today_xyhupz: 0, //新用户up值
				today_repeat_user: 0, //复充人数
				today_repeat_rate: 0 //复充率
			}
		},
		async onLoad() {
			const alioss = await db.collection('a_config').where({
				name: "alioss"
			}).get();
			let ossinfo = alioss.result.data[0];
			vk.setVuex('$app.ossinfo', ossinfo) //把阿里云oss配置存到本地缓存	

			// this.TimedRefresh() //定时刷新
		},
		onShow() {
			let user = vk.vuex.get('$user.userInfo');

			if (user.role.includes("copyright")) {
				uni.reLaunch({
					url: "/pages/query/query"
				})
				return;
			}

			let {
				todayStart
			} = vk.pubfn.getCommonTime(new Date());
			this.todayStart = todayStart;
			this.getNotices()
			this.get_today_number()
		},
		onUnload() {
			clearInterval(this.timer);
		},
		onHide() {
			clearInterval(this.timer);
		},
		methods: {
			//最新修改，定时刷新
			TimedRefresh() {
				let that = this
				// 倒计时60秒
				var countDown = that.time_refresh;
				this.timer = setInterval(function() {
					countDown--;
					if (countDown < 0) {
						//请求实时数据，调用云函数，刷新页面
						that.get_today_number()
						// clearInterval(timer);
						that.time_refresh = 60;
						countDown = that.time_refresh
					} else {
						// 更新倒计时显示
						that.time_refresh = countDown;
						console.log("倒计时：" + countDown);
					}
				}, 1000);
			},
			todetail(notice) {
				uni.navigateTo({
					url: "/pages/index/notice?id=" + notice._id
				})
			},
			getNotices() {
				vk.callFunction({
					url: 'admin/dls/kh/index1/index2',
					// title: '请求中...',
					loading: false,
					data: {
						type: "getgg"
					},
					success: (res) => {
						// console.log("res=", res);
						let user_id = vk.vuex.get('$user.userInfo._id');
						let lists = res.notices.data;
						this.notice1 = lists[0] || {};
						this.notice2 = lists[1] || {};
						this.notice3 = lists[2] || {};
						console.log("数据返回结果=>", res.notices.data);
					}
				});
			},
			get_today_number() {
				vk.callFunction({
					url: 'admin/dls/kh/index1/index1',
					title: '请求中...',
					data: {
						todayStart: this.todayStart
					},
					success: (data) => {
						this.today_repeat_amount = vk.pubfn.priceFilter(data.today_repeat_amount); //复充金额
						this.today_repeat_rate = vk.pubfn.percentageFilter(data.today_repeat_rate); //复充率

						this.today_repeat_user = data.today_repeat_user;
						if (data.Users_payNumber == 0) {
							this.today_repeat_rate = 0
						} else {
							this.today_repeat_rate = vk.pubfn.toDecimal(data.today_repeat_user / data
								.Users_payNumber, 4) * 100;
						}
						this.Users_payNumber = data.Users_payNumber; //今日付费人数
						this.new_add_user = data.num; //新增用户数
						this.new_users_moneysum = vk.pubfn.toDecimal(data.new_users_moneysum / 100,
							2); //新用户充值金额
						this.newUsers_payNumber = data.newUsers_payNumber; //新用户充值人数
						this.newUsers_rate = vk.pubfn.toDecimal(data.newUsers_payNumber / data.num * 100,
							2); //新用户付费率
						this.newUsers_pcr = vk.pubfn.toDecimal(this.new_users_moneysum / data.num,
							2); //新用户人均充值金额
						this.today_Recharge_amount = vk.pubfn.toDecimal(data.today_Recharge_amount / 100,
							2); //今日充值金额
						this.today_recharges_Number = data.today_recharges_Number; //今日充值笔数
						this.today_unit_price = vk.pubfn.toDecimal(this.today_Recharge_amount / this
							.today_recharges_Number, 2) //笔单价
						this.today_xyhffupz = vk.pubfn.toDecimal(this.new_users_moneysum / data
							.newUsers_payNumber, 2) //新用户付费UP值
						this.today_xyhupz = vk.pubfn.toDecimal(this.new_users_moneysum / data.num, 2) //新用户UP值
					}
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.topbox {
		width: 23%;
		height: 90px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		/* box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2), 0 6rpx 20rpx 0 rgba(0, 0, 0, 0); */
		margin: 20px 20px 0rpx 0;
		padding: 15px 30px;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.box2 {
		width: 95%;
		display: flex;
		flex-wrap: wrap;
		box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2), 0 6rpx 20rpx 0 rgba(0, 0, 0, 0);
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.numstyle {
		color: #4c4c4c;
		font-size: larger;
		/* font-weight: bold; */
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 450px;
	}
</style>